<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>Vue 3 + Pinia CDN 示例</title>
</head>

<body>
    <div id="app">
        <h2>{{ $store.name }} 的计数器：{{ $store.count }}</h2>
        <button @click="$store.increment()">+1</button>
        <button @click="$store.decrement()">-1</button>
        <p>双倍值: {{ $store.doubleCount }}</p>
    </div>
    <!-- 引入 Vue 3 (包含编译器的完整版本) -->
    <script src="../lib/vue/3/vue.global.js"></script>

    <!-- 定义 dummy devtoolsApi 避免报错 -->
    <script>
        window.devtoolsApi = window.devtoolsApi || {
            setupDevtoolsPlugin: function () { }
        }
    </script>
    <!-- 引入 Pinia -->
    <script src="../lib/pinia/3/pinia.iife.js"></script>
    <script>
        const { createApp } = Vue;
        const { createPinia, defineStore } = Pinia;

        // 1. 创建 Pinia 实例
        const pinia = createPinia();

        // 2. 定义 store
        const useMainStore = defineStore('main', {
            state: () => ({
                count: 0,
                name: 'Pinia'
            }),
            getters: {
                doubleCount: (state) => state.count * 2
            },
            actions: {
                increment() {
                    this.count++;
                },
                decrement() {
                    this.count--;
                }
            }
        });

        // 3. 创建 Vue 应用
        const app = createApp({
            mounted() {
                // 可选：在组件中访问 store
                this.$store = useMainStore();
            }
        });

        // 4. 使用 Pinia 插件
        app.use(pinia);

        // （可选）全局注入 $store 方便模板访问（实际开发建议在 setup 中使用）
        app.config.globalProperties.$store = useMainStore();

        // 5. 挂载应用
        app.mount('#app');
    </script>
</body>

</html>